<template>
  <component ref="form" :propsitem="config?.props" :is="config.name" :title="config.title"
    :sourceType="config?.props?.sourceType" :field="config?.props.field" :itemId="config?.id" :mode="mode"
    :source="config.props.source" v-model="_value" v-bind="config.props" @input="setValue" :render="render"
    :ApplyDetailList="ApplyDetailList" @height-change="onHeightChange" />
</template>
<script>
import components from './ComponentExport';

export default {
  name: "FormRender",
  components: components,
  props: {
    mode: {
      type: String,
      default: 'DESIGN'
    },
    value: {
      default: undefined
    },
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    render: {
      type: Boolean,
      default: true
    },
    ApplyDetailList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    _value: {
      get () {
        return this.value;
      },
      set (val) {
        this.$emit("input", val);
      }
    }
  },
  data () {
    return {

    }
  },
  mounted () {
  },
  methods: {
    validate (call) {
      this.$refs.form.validate(call)
    },
    setValue (val) {
      this._val = val
    },
    // 处理页面变化影响FileUpload组件的位置
    onHeightChange (status) {
      this.$emit('height-change', status);
    },
  }
}
</script>

<style lang="scss" scoped></style>
